import html2canvas from 'html2canvas'
import { jsPDF } from "jspdf";
export default {
  methods: {
    /**
     * 将所选页面元素以指定格式文件下载下来
     * @param {*} el 页面元素
     * @param {*} type 下载类型 png、pdf
     * @param {*} name 下载后文件的命名
     */
    generateFile(el, name = 'file', type = 'png') {
      this.loading = true
      // let parent = el.offsetParent;
/*
      let grandParent = parent.offsetParent;
      let left = grandParent.offsetLeft + parent.offsetLeft + el.offsetLeft;
      let top = grandParent.offsetTop + parent.offsetTop + el.offsetTop;
*/
      let tableWidth = document.querySelector(
        "#durationChartTable .el-table__body-wrapper"
      );
      // durationChartTable 是我在 el-table 上指定的 id
      // .el-table__body-wrapper 是组件自动生成的带滚动条的 div 上的 class (需要在浏览器的开发者工具中查找)
      // 重要：设置表格父节点的宽度，最后再把宽度恢复成100%
      document.getElementById(
        "durationChart"
      ).style.width = `${tableWidth.scrollWidth}px`;
      const eleTable = document.getElementById('durationChartTable')
      const tempHeight = eleTable.getBoundingClientRect().height
      console.log("-----", tempHeight,tableWidth.scrollHeight, tableWidth.scrollWidth, );
      this.sortTableHeight = tableWidth.scrollHeight + 60
      console.log('++', eleTable.getBoundingClientRect().height)

      this.$nextTick(() => {
        return new Promise((resolve, reject) => {
          html2canvas(el, {
            // x: left,
            // y: top,
            ///  here！！！！！！！ ///
            width: tableWidth.scrollWidth + 60, // 为了使横向滚动条的内容全部展示，这里必须指定！！
            height: this.sortTableHeight
            // height: el.getBoundingClientRect().height
            // 注意id需在html代码中指定。
            // eg:html某div中指定了‘id="myDiv"’，此处写为‘getElementById("myDiv")’，则pdf以myDiv的宽度为准
          }).then((canvas) => {
            let contentWidth = canvas.width;
            let contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            // eslint-disable-next-line no-extra-parens
            let pageHeight = (contentWidth / 592.28) * 841.89;
            //未生成pdf的html页面高度
            let leftHeight = contentHeight;
            //页面偏移
            let position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28;
            // eslint-disable-next-line no-extra-parens
            let imgHeight = (592.28 / contentWidth) * contentHeight;
            let pageData = canvas.toDataURL("image/jpeg", 1.0);
            if (type == 'png') {
              let saveLink = document.createElement('a')
              saveLink.href = pageData
              saveLink.download = name + '.png'
              saveLink.click()
              return
            }

            let pdf = new jsPDF("", "pt", "a4");
            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
              pdf.addImage(pageData, "JPEG", 5, 30, imgWidth, imgHeight);
            } else {
              while (leftHeight > 0) {
                //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                  //添加新页
                  pdf.addPage();
                }
              }
            }
            pdf.save(`${name}.pdf`);
            document.getElementById("durationChart").style.width = `${100}%`;
            this.sortTableHeight = tempHeight
            // document.getElementById("durationChartTable").style.height = `${tempHeight}px`;
            resolve('finished')
          }).finally(() => {
            this.loading = false
            reject('fail')
          })
        })
      })

    }
  }
}
